<template>
	<view>
		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					项目名称
				</view>
				<view class="acea-row row-middle row-right item-r">
					<Uselect class="input-r" v-model="dataForm.projectId" :list="projectList" keyName="name" keyId="id"
						@inChange="getprojectList" placeholder="请选择项目名称" :name="brandId" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					物业地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder="请输入/选择地址" v-model="dataForm.address">
					<image src="../static/images/location.png" mode="" @click="chooseLocation"></image>
				</view>
			</view>


			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					物业类型
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view :class="dataForm.storeCategory>0?'':'no-data-r'" @click="openPick('storeCategory')">
						{{dataForm.storeCategory?(chooseName(storeCategoryDic,dataForm.storeCategory)):'请选择'}}
					</view>

				</view>
			</view>

			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					店铺类型
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view :class="dataForm.propertyType>0?'':'no-data-r'" @click="openPick('propertyType')">
						{{dataForm.propertyType?(chooseName(typeDataList,dataForm.propertyType)):'请选择'}}
					</view>
				</view>
			</view>

			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					铺面类型
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="" @click="opendiction(17)">
						<input class="input-r" type="text" placeholder="请选择铺面类型" placeholder-class="placeholder-class"
							v-model="dataForm.storefrontName" :disabled="true" />
					</view>
				</view>
			</view>

			<view class="acea-row row-middle row-between">
				<view class="acea-row row-middle row-between item border-b w-48">
					<view class="label label-m">产权面积</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:30" v-model="dataForm.floorage">
						<text>m²</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b w-48">
					<view class="label label-m">使用面积</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:30" v-model="dataForm.area">
						<text>m²</text>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					楼层
				</view>
				<view class="acea-row row-middle row-right item-r floor">
					<view class="">第</view>
					<input type="number" v-model="dataForm.floor[0]">
					<view class="">层</view>
					<view class="margin-l">共</view>
					<input type="number" v-model="dataForm.floor[1]">
					<view class="">层</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					户型
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view :class="dataForm.houseType>0?'':'no-data-r'" @click="openPick('houseType')">
						{{dataForm.houseType?(chooseName(houseTypeDic,dataForm.houseType)):'请选择'}}
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label ">
					层高
				</view>
				<view class="acea-row row-middle row-right item-r ">
					<view>
						<input class="input-r" placeholder-class="placeholder-class" type="text" placeholder="请输入层高"
							v-model="dataForm.cenggao">
					</view>
					<text> m</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label ">
					进深
				</view>
				<view class="acea-row row-middle row-right item-r ">
					<view>
						<input class="input-r" placeholder-class="placeholder-class" type="text" placeholder="请输入进深"
							v-model="dataForm.jianshen">
					</view>
					<text> m</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					开间
				</view>
				<view class="acea-row row-middle row-right item-r ">
					<view>
						<input class="input-r" placeholder-class="placeholder-class" type="text" placeholder="请输入开间"
							v-model="dataForm.kaijian">
					</view>
					<text> m</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between">
				<view class="acea-row row-middle row-between item border-b w-48">
					<view class="label">店招</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:30" v-model="dataForm.dianzhao">
						<text>m²</text>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b w-48">
					<view class="label">承重</view>
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:30" v-model="dataForm.chengzhong">
						<text>g/m²</text>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					电梯
				</view>
				<view class="acea-row row-middle row-right item-r radio-list">
					<view class="acea-row row-middle radio-item" @click="dataForm.elevator=1">
						<image src="../static/images/radio_on.png" mode="" v-if="dataForm.elevator==1"></image>
						<image src="../static/images/radio_no.png" mode="" v-else></image>
						<view class="">有</view>
					</view>
					<view class="acea-row row-middle radio-item margin-l" @click="dataForm.elevator=0">
						<image src="../static/images/radio_on.png" mode="" v-if="dataForm.elevator==0"></image>
						<image src="../static/images/radio_no.png" mode="" v-else></image>
						<view class="">无</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					装修
				</view>
				<view class="acea-row row-middle row-right item-r radio-list">
					<view class="acea-row row-middle radio-item" @click="dataForm.renovation=1">
						<image src="../static/images/radio_on.png" mode="" v-if="dataForm.renovation==1"></image>
						<image src="../static/images/radio_no.png" mode="" v-else></image>
						<view class="">有</view>
					</view>
					<view class="acea-row row-middle radio-item margin-l" @click="dataForm.renovation=0">
						<image src="../static/images/radio_on.png" mode="" v-if="dataForm.renovation==0"></image>
						<image src="../static/images/radio_no.png" mode="" v-else></image>
						<view class="">无</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					配套设施
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="" @click="opendiction(15)">
						<input class="input-r" type="text" placeholder="请选择配套设施" placeholder-class="placeholder-class"
							v-model="dataForm.supportingName" :disabled="true" />
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					临路类型
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="" @click="opendiction(16)">
						<input class="input-r" type="text" placeholder="请选择临路类型" placeholder-class="placeholder-class"
							v-model="dataForm.linLuName" :disabled="true" />
					</view>
				</view>
				<!-- 			<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="">
						<picker @change="res=>dicChange(res,linLuTypeDic,'linLuType','name')"
							:value="dataForm.linLuTypeValue" :range="linLuTypeDic" range-key="name">
							<view class="uni-input" v-if="dataForm.linLuType">{{dataForm.linLuType}}</view>
							<view class="no-data-r" v-else>请选择</view>
						</picker>
					</view>
				</view> -->
			</view>
			<view class="acea-row row-middle row-between item border-b" @click="toReal">
				<view class="label label-m">
					房产认证
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="no-data-r-red">认证</view>
				</view>
			</view>
			<view class="certification-info" v-if="dataForm.houser&&Object.keys(dataForm.houser).length>0">

				<view class="acea-row">
					<view class="pictrue" v-for="(item,index) in dataForm.houser.houseimage.split(',')" :key="item">
						<image :src="item"></image>
					</view>
				</view>
				<view class="acea-row row-middle ">
					<view class="label-s">联系人</view>
					<view class="text-s">{{dataForm.houser.username}} {{dataForm.houser.phone}}</view>
				</view>
				<view class="acea-row row-middle ">
					<view class="label-s">产权地址</view>
					<view class="text-s">{{dataForm.houser.address}}</view>
				</view>
				<view class="acea-row row-middle">
					<view class="label-s">购买时间</view>
					<view class="text-s">{{dataForm.houser.buytime}}</view>
				</view>
				<view class="acea-row row-middle" v-if="dataForm.houser.buymoney">
					<view class="label-s">购买价格</view>
					<view class="text-s">{{dataForm.houser.buymoney}}</view>
				</view>

			</view>
			<!-- 			<view class="certification-info" v-else>
				<view class="no-data-r-red">未认证</view>
			</view> -->
			<view class="uni-p-b-98"></view>
		</view>
		<view class="submit-btn" @click="toAddProperty">完成</view>
		<view class="uni-p-b-98"></view>
		<dictionaryType :gids='gids' @clickOk='clickOk' :key="gids" :popupShow='openPopupShow'
			@popupClose="openPopupShow = false" :checkIds="dictionaryTypeInitByIds" />

		<u-picker :defaultIndex="pickDefaultIndex" :show="pickShow" :columns="pickData" :keyName="pickKey"
			@cancel="pickShow = false" @confirm="pickChoose" @close="pickClose" :key="pickRefsh"></u-picker>
	</view>
</template>

<script>
	import Uselect from '@/pages/releases/components/select.vue';
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		getprojectListApi,
		addProperty,
		getDetail,
		editProperty
	} from '@/api/centerModule'
	import {
		dictionary
	} from '@/api/subletOfShop.js'
	import {
		Deb
	} from "@/utils/util.js"
	import dictionaryType from '../components/dictionaryType.vue'
	export default {
		data() {
			return {
				dataForm: {
					projectId: 0, //项目id
					address: '', //物业地址
					floorage: '', //产权面积
					area: '', //使用面积
					floor: [1, 1], //楼层	
					storeCategory: 0, //物业类型
					propertyType: 0, //店铺类型
					storefrontType: '', //铺面类型
					storefrontName: '', //铺面类型展示
					// floorCount: '', //楼层总数
					shopOffer: '', //店招 招牌大小
					loadBearing: '', //承重
					elevator: 0, //是否有电梯
					longitude: 0, //经度
					latitude: 0, //纬度
					houseType: '', //户型
					cenggao: '', //层高
					kaijian: '', //开间
					jianshen: '', //间深
					dianzhao: '', //店招
					chengzhong: '', //承重
					renovation: 0, //装修
					supportingFacility: '', //配套设施
					supportingName: '', //配套设置Value
					linLuType: '', //临路类型，
					linLuName: '', //临路类型value
					houser: {}
				},
				projectList: [],
				brandId: '',
				typeDataList: [{
						id: 1,
						name: '出租'
					},
					{
						id: 2,
						name: '求租'
					}
				],
				houseTypeDic: [],
				supportingFacilityDic: [],
				storeCategoryDic: [],
				linLuTypeDic: [],
				gids: 0,
				pickShow: false,
				pickData: [],
				pickDefaultIndex: [0],
				pickKey: 'name',
				pickFiled: '',
				pickRefsh: '',
				pickChooseD: {},
				openPopupShow: false,
				dictionaryTypeInitByIds: '', //字典多选组件初始化数据
				requireFiledRule: [{
						filed: 'projectId',
						tip: '请输入项目名称'
					},
					{
						filed: 'address',
						tip: '请输入物业地址'
					},
					{
						filed: 'storeCategory',
						tip: '请选择物业类型',
					},
					{
						filed: 'propertyType',
						tip: '请选择店铺类型'
					},
					{
						filed: 'storefrontType',
						tip: '请选择铺面类型'
					},
					{
						filed: 'floorage',
						tip: '请输入产权面积'
					},
					{
						filed: 'area',
						tip: '请输入使用面积'
					},
					{
						filed: 'houseType',
						tip: '请选择户型'
					},
					{
						filed: 'houser',
						tip: '请进行房产认证'
					}
				],
				isDetail: false
			};
		},
		components: {
			Uselect,
			dictionaryType
		},
		created() {
			//获取项目列表
			this.getprojectList("");
			//获取房型字典
			this.getHouseTypeDic();
		},

		methods: {
			toReal() {
				let that = this;
				uni.navigateTo({
					url: '/pages/releases/continueFillin/realEstate',
					events: {
						realEstate(res) {
							console.log('认证完整数据', res.data)
							that.dataForm.houser = res.data;
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('toInitRz', {
							data: that.dataForm.houser
						})
					}
				})
			},
			//获取项目名称列表
			async getprojectList(name) {
				uni.showLoading({
					title: '加载中'
				});
				try {
					let res = await getprojectListApi({
						limit: 8,
						name
					});
					this.projectList = res?.data.list
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
				uni.hideLoading()
			},

			//选择地址
			chooseLocation() {
				let initlocation = {};
				if (this.dataForm.latitude && this.dataForm.longitude) {
					initlocation.latitude = this.dataForm.latitude;
					initlocation.longitude = this.dataForm.longitude;
				}
				uni.chooseLocation({
					...initlocation,
					success: (res) => {
						this.dataForm.address = res.name;
						this.dataForm.longitude = res.longitude;
						this.dataForm.latitude = res.latitude;
					},
				})
			},
			//监听物业类型改变
			pickerChange(formFiled, res) {
				this.dataForm[formFiled] = res.detail.value;
			},
			dicChange(res, data, filed, key, ext) {
				this.dataForm[filed] = data[res.detail.value]['id'];
				this.dataForm[filed + (ext ? ext : 'Value')] = data[res.detail.value]['name'];
			},
			//打开复选框
			opendiction(val) {
				this.gids = val;
				if (val == 17) {
					this.dictionaryTypeInitByIds = this.dataForm.storefrontType;
				} else if (val == 15) {
					this.dictionaryTypeInitByIds = this.dataForm.supportingFacility
				} else if (val == 16) {
					this.dictionaryTypeInitByIds = this.dataForm.linLuType
				}
				this.openPopupShow = true
			},
			openPick(filed, key) {
				key ? this.pickKey = key : null;
				this.pickFiled = filed;
				this.pickData = [];
				this.pickDefaultIndex = this.pickChooseD[this.pickFiled] ? this.pickChooseD[this.pickFiled] : [0];
				if (filed == 'storeCategory') {
					this.pickData = [this.storeCategoryDic];
				} else if (filed == 'propertyType') {
					this.pickData = [this.typeDataList];
				} else if (filed == 'houseType') {
					this.pickData = [this.houseTypeDic];
				}
				this.pickShow = true;

			},
			pickChoose(data) {
				this.pickChooseD[this.pickFiled] = data?.indexs;
				this.dataForm[this.pickFiled] = data?.value[0].id;
				this.pickShow = false;
			},
			chooseName(dic, val) {
				return dic?.filter(item => item.id == val)[0]?.name;
			},
			pickClose() {
				console.log('close')
				this.pickRefsh = new Date().getTime()
			},
			//铺面类型
			clickOk(val) {
				let ids = val.map(item => {
					return item.id
				}).join(',');

				let names = val.map(item => {
					return item.describe
				}).join(',');

				if (this.gids == 17) {
					this.dataForm.storefrontType = ids;
					this.dataForm.storefrontName = names;
				} else if (this.gids == 15) {
					this.dataForm.supportingFacility = ids;
					this.dataForm.supportingName = names;

				} else if (this.gids == 16) {
					this.dataForm.linLuType = ids;
					this.dataForm.linLuName = names;
				}
				this.openPopupShow = false
			},
			//获取户型字典
			async getHouseTypeDic() {
				let res = await dictionary({
					gids: '14,17,28,15,16'
				})
				this.houseTypeDic = res.data['28']
				this.supportingFacilityDic = res.data['15']
				this.linLuTypeDic = res.data['16']
				this.storeCategoryDic = res.data['14']
			},
			toAddProperty(){
				Debounce(this.addMeth(),800)
			},
			//提交物业
			async addMeth(){
				
				let validate = this.customValidation(this.dataForm, this.requireFiledRule)
				if (validate) {
					uni.showLoading({
						title: '保存中'
					});
					let submitData = Object.assign(this.dataForm, {});
					submitData['city'] = this.$city;
					submitData['floor'] = submitData['floor'].join("-")
					let result = null;
					if (this.isDetail) {
						result = await editProperty(submitData)
					} else {
						result = await addProperty(submitData);
					}
					uni.hideLoading();
					if (result.code == 200) {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('upList');
						uni.navigateBack(-1);
					}
				}
			},
			filterToName(data, form, key, filed) {
				let d = data?.filter(item => item.id == form[filed])
				return d[key];
			},
			/**
			 * 非空字段验证
			 * @param {Object} data 验证的对象数据 
			 * @param {Array} rule 自定义验证规则 
			 * rule:{
			 *  filed 字段名
			 *  isRequire 是否必填
			 *} 
			 */
			customValidation(data, rule) {
				console.log(data, rule)
				if (!rule) {
					return false;
				}
				for (let i = 0; i < rule.length; i++) {
					let k = rule[i].filed
					let kType = typeof data[k];
					console.log(k, kType)
					if (kType === 'string' && (!data[k])) {
						this.$util.Tips({
							title: rule[i].tip
						})
						return false;
					} else if (kType === 'number') {

						//包含0 
						if (!(rule[i].isZero)) {
							if ((data[k] === 0) && (!data[k])) {
								this.$util.Tips({
									title: rule[i].tip
								})
								return false;
							}
						} else {
							if (!data[k]) {
								this.$util.Tips({
									title: rule[i].tip
								})
								return false;
							}
						}
					} else if (kType == 'object') {
						if ((data[k] == null) || (data[k] && Object.keys(data[k]).length <= 0)) {
							this.$util.Tips({
								title: rule[i].tip
							})
							return false;
						}
					}
				}
				return true;
			},
			//获取物业详情
			getPropertyDetail(id) {
				console.log(id)
				getDetail(id).then(res => {
					console.log(res.data)
					let {
						data
					} = res;
					data.floor = data.floor ? data.floor.replace(/,/, '-').split("-") : [1, 1]
					this.$nextTick(() => {
						this.dataForm = data;
					})

				})
			}
		},
		onLoad(props) {
			if (props.id) {
				this.isDetail = true;
				this.getPropertyDetail(props.id);
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.list .item-r {
		width: calc(100% - 180rpx);
	}

	.list .item .small-ipt {
		// width: calc(100% - 140rpx);
		width: 60%;

	}

	.list .item .small-ipt input {
		display: block;
		width: 130rpx;
		text-align: right;
	}

	.certification-info {
		padding: 30rpx 0;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 48rpx;
		color: rgba(163, 164, 170, 1);

		.pictrue {
			width: 210rpx;
			height: 180rpx;
			border-radius: 4rpx;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			background: #f5f5f5;

			image {
				width: 100%;
				height: 100%;
				width: 105.48px;
				height: 89px;
			}
		}

		.label-s {
			width: 140rpx;
		}

		.text-s {
			width: calc(100% - 140rpx);
		}
	}
</style>